<template>
  <div>
    <div class="title">banner1图片</div>
    <div class="uploadingBanner">
      <img
        v-if="urlBool"
        class="showImg"
        :src="template4Data.banner"
        mode="scaleToFill"
        alt
      />
      <div class="showImg2Box" v-if="!urlBool" @click="updataImg">
        <img
          class="showImg2"
          src="/static/assets/icon/ghtp.png"
          mode="scaleToFill"
          alt
        />
        <span>点击添加首页banner1图</span>
      </div>
      <p @click="deleteBtn" v-if="urlBool" class="deleteBtn">×</p>
    </div>
    <div class="title">banner1链接</div>
    <div class="urlContent">
      <input
        class="urlClass"
        v-model="template4Data.bannerUrl"
        maxlength="9999"
      />
    </div>

    <div class="title">banner2图片</div>
    <div class="uploadingBanner">
      <img
        v-if="urlBool1"
        class="showImg"
        :src="template4Data.banner1"
        mode="scaleToFill"
        alt
      />
      <div class="showImg2Box" v-if="!urlBool1" @click="updataImg1">
        <img
          class="showImg2"
          src="/static/assets/icon/ghtp.png"
          mode="scaleToFill"
          alt
        />
        <span>点击添加banner2图片</span>
      </div>
      <p @click="deleteBtn1" v-if="urlBool1" class="deleteBtn">×</p>
    </div>
    <div class="title">banner2链接</div>
    <div class="urlContent">
      <input
        class="urlClass"
        v-model="template4Data.bannerUrl1"
        maxlength="9999"
      />
    </div>

    <div class="title">banner3图片</div>
    <div class="uploadingBanner">
      <img
        v-if="urlBool2"
        class="showImg"
        :src="template4Data.banner2"
        mode="scaleToFill"
        alt
      />
      <div class="showImg2Box" v-if="!urlBool2" @click="updataImg2">
        <img
          class="showImg2"
          src="/static/assets/icon/ghtp.png"
          mode="scaleToFill"
          alt
        />
        <span>点击添加banner3图片</span>
      </div>
      <p @click="deleteBtn2" v-if="urlBool2" class="deleteBtn">×</p>
    </div>
    <div class="title">banner3链接</div>
    <div class="urlContent">
      <input
        class="urlClass"
        v-model="template4Data.bannerUrl2"
        maxlength="9999"
      />
    </div>
    <div class="title">文案名称</div>
    <div class="urlContent">
      <input
        class="urlClass"
        v-model="template4Data.contentName"
        maxlength="9999"
      />
    </div>
    <div class="title">文案内容</div>
    <div class="urlContent">
      <input class="urlClass" v-model="template4Data.content" maxlength="9999" />
    </div>
    <div class="content">
      <div class="btn">
        <button
          @click="handleClick"
          class="okBtn"
          type="primary"
          shape="circle"
          size="small"
        >保存</button>
      </div>
    </div>
  </div>
</template>

<script>
import {
  UPDATE_SHOP_DECORATION_API,
  FIND_GOODS_TYPE_LIST_API,
  UPLOAD_ADORN_BANNER
} from '@/api'

export default {
  components: {},
  data () {
    return {
      urlBool: false,
      urlBool1: false,
      urlBool2: false,
      goodsTypeId: '', // 一出来就获取的默认选项(就是下标)
      arrLength: 0, // 总条数
      num: 0, // 默认传走的参数(暂时不修改)
      array: [], // 选项框数据
      dataArray: [], // 完整数据
      select: '', // 默认选项
      defaultSubscript: '', // （这个才是要传走的数
      template4Data: {}
    }
  },
  computed: {
    account () {
      return this.$cookie.get('account')
    }
  },
  onShow () {
    this.init()
  },
  onUnload () {
    this.$cookie.remove('dataInfo')
  },
  created () {},
  methods: {
    deleteBtn () {
      this.$dialog('确定移除当前banner').then(r => {
        this.template4Data.banner = ''
        this.urlBool = false
      })
    }, // 删除当前图片
    updataImg () {
      const vm = this
      UPLOAD_ADORN_BANNER()
        .then(r => {
          let res = JSON.parse(r.data)
          if (res.code === '0') {
            vm.template4Data.banner = res.data.imgPath
          } else {
            vm.$toast(res.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    }, // 上传图片
    deleteBtn1 () {
      this.$dialog('确定移除当前banner').then(r => {
        this.template4Data.banner1 = ''
        this.urlBool1 = false
      })
    }, // 删除当前图片
    updataImg1 () {
      const vm = this
      UPLOAD_ADORN_BANNER()
        .then(r => {
          let res = JSON.parse(r.data)
          if (res.code === '0') {
            vm.template4Data.banner1 = res.data.imgPath
          } else {
            vm.$toast(res.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    }, // 上传图片
    deleteBtn2 () {
      this.$dialog('确定移除当前banner').then(r => {
        this.template4Data.banner2 = ''
        this.urlBool2 = false
      })
    }, // 删除当前图片
    updataImg2 () {
      const vm = this
      UPLOAD_ADORN_BANNER()
        .then(r => {
          let res = JSON.parse(r.data)
          if (res.code === '0') {
            vm.template4Data.banner2 = res.data.imgPath
          } else {
            vm.$toast(res.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    }, // 上传图片
    bindPickerChange (e) {
      const vm = this
      for (let i = 0; i < vm.array.length; i++) {
        if (Number(e.mp.detail.value) === Number(i)) {
          vm.select = vm.array[i]
          vm.goodsTypeId = i
        }
      }
      vm.findData(vm.goodsTypeId)
    },
    findData (val) {
      for (let i = 0; i < this.arrLength; i++) {
        if (val === i) {
          this.defaultSubscript = this.dataArray[i].goodsTypeId
        }
      }
    }, // 找goodsTypeId
    handleClick () {
      const vm = this
      let params = {
        shopId: vm.account.shopId,
        goodsTypeId: vm.defaultSubscript,
        template: vm.$root.$mp.query.val,
        ...vm.template4Data
      }
      UPDATE_SHOP_DECORATION_API(params)
        .then(r => {
          if (r.data.code === '0' && r.data.data) {
            vm.$alert('保存成功').then(() => {
              vm.$cookie.remove('dataInfo')
              vm.$router.go('-2')
            })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    }, // 确定按钮
    init () {
      console.log(this.$root.$mp.query)
      this.template4Data = this.$cookie.get('template4Data')
      this.arrLength = 0
      this.array = []
      this.dataArray = []
      this.select = ''
      if (this.template4Data.banner) {
        this.urlBool = true
      } else {
        this.urlBool = false
      }
      if (this.template4Data.banner1) {
        this.urlBool1 = true
      } else {
        this.urlBool1 = false
      }
      if (this.template4Data.banner2) {
        this.urlBool2 = true
      } else {
        this.urlBool2 = false
      }
      this._getData(Number(this.$root.$mp.query.goodsTypeId))
    },
    _getData (goodsTypeId) {
      const vm = this
      FIND_GOODS_TYPE_LIST_API(vm.account.shopId, vm.num)
        .then(r => {
          if (r.data.code === '0') {
            vm.arrLength = r.data.data.length
            let data = r.data.data
            vm.dataArray = r.data.data
            for (let j = 0; j < vm.arrLength; j++) {
              vm.array.push(data[j].goodsTypeName)
              if (goodsTypeId === data[j].goodsTypeId) {
                vm.goodsTypeId = j
                vm.defaultSubscript = data[j].goodsTypeId
                vm.select = vm.array[j]
              }
            }
            // vm.forInit(vm.arrLength)
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    }, // 请求回来数据
    forInit (len) {
      for (let i = 0; i < len; i++) {
        if (this.goodsTypeId === Number(i)) {
          this.select = this.array[i]
          this.defaultSubscript = this.dataArray[i].goodsTypeId
        }
      }
    }
  }
}
</script>

<style lang="scss">
.uploadingBanner {
  width: 340px;
  height: 150px;
  margin: 30px auto;
  border-radius: 4px;
  position: relative;
  .showImg {
    width: 100%;
    height: 100%;
  }
  .deleteBtn {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    background: #ff2625;
    color: #fff;
    border-radius: 50px;
    z-index: 2;
    width: 30px;
    height: 30px;
  }
  .showImg2Box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .showImg2 {
      width: 70px;
      height: 50px;
    }
    span {
      margin-top: 10px;
      font-size: 14px;
      color: #5d93fd;
    }
  }
}
.title {
  font-size: 14px;
  color: #000;
  border-left: 5px solid #5692ff;
  padding-left: 10px;
}
.urlContent {
  height: 30px;
  width: 340px;
  margin: 20px auto;
  border: 1px solid #ececec;
  .urlClass {
    color: #000;
    font-size: 14px;
    width: 100%;
    padding: 0 15px;
    height: 34px;
    line-height: 34px;
  }
}
.content {
  width: 340px;
  height: 30px;
  margin: auto;
  .section {
    margin: 20px 0;
    // padding: 10px 0;
    height: 30px;
    border: 1px solid #ececec;
    border-radius: 4px;
    font-size: 14px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .sectionBox {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      .picker {
        margin-left: 10px;
      }
    }
    .s {
      width: 0;
      height: 0;
      border-width: 10px;
      border-style: solid;
      border-color: #5795ff transparent transparent transparent;
      margin-right: 10px;
      margin: 5px 10px 0 0;
      position: absolute;
      top: 50%;
      right: 10px;
      transform: translate(0, -50%);
    }
  }
  .hint {
    font-size: 12px;
    color: #8b8b8b;
  }
  .btn {
    margin-top: 100px;
    .okBtn {
      text-align: center;
      vertical-align: middle;
      touch-action: manipulation;
      cursor: pointer;
      background-image: none;
      white-space: nowrap;
      user-select: none;
      font-size: 14px;
      border: 0 !important;
      position: relative;
      text-decoration: none;
      height: 44px;
      line-height: 44px;
      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
      color: #fff !important;
      margin: 10px;
      background: #508ff9;
      border-radius: 25px;
    }
  }
}
</style>
